import React,{Component,Fragment} from 'react'
import styles from './style.scss'
import Panel from 'bayd/lib/panel'
import Card from 'bayd/lib/card'
import Modal from 'bayd/lib/modal'

export default class ModalView extends Component{
	constructor(){
		super()
		this.state={
			showModal:'0'
		}
	}
	open = (v) => {
		this.setState({
			showModal:v
		})
	}
	close = () => {
		this.setState({
			showModal:'0'
		})
	}
	renderModal = () => {
		let {showModal}=this.state
		return<Fragment>
			<Card 
				renderView={()=>{return<div className={styles['render-view']}>
					<button onClick={this.open.bind(this,'1')}>默认对话框</button>
					<Modal 
						title='默认标题'
						visible={showModal=='1'} 
						onClose={this.close}
						onConfirm={this.close}
						onCancel={this.close}
					>
						<div>
							<p>弹窗默认宽500px ，高500px 。</p>
						</div>
					</Modal>
				</div>}} 
				description={'默认标题'} 
				code={`import { Modal } from 'bnt'
class Demo extends React.Component {
	render() {
		return <Modal 
			title='默认对话框'
			visible={showModal=='1'} 
			onClose={this.close}
			onConfirm={this.close}
			onCancel={this.close}
		>
			<div>
				<p>弹窗默认宽500px ，高500px 。</p>
			</div>
		</Modal>
	}
}`}/>
			<Card 
				renderView={()=>{return<div className={styles['render-view']}>
					<button onClick={this.open.bind(this,'2')}>自定义页脚</button>
					<Modal 
						title='自定义页脚'
						visible={showModal=='2'} 
						onClose={this.close}
						onConfirm={this.close}
						onCancel={this.close}
						renderFooter={
							()=>{
								return(<div>
									可以根据需要，在这里定制具体的内容。
								</div>)
							}
						}
					>
						<div>
							<p>自定义弹窗页脚。</p>
						</div>
					</Modal>
				</div>}} 
				description={'自定义页脚'} 
				code={`import { Modal } from 'bnt'
class Demo extends React.Component {
	render() {
		return <Modal 
			title='自定义页脚'
			visible={showModal=='2'} 
			onClose={this.close}
			onConfirm={this.close}
			onCancel={this.close}
			renderFooter={
				()=>{
					return(<div>
						可以根据需要，在这里定制具体的内容。
					</div>)
				}
			}
		>
			<div>
				<p>自定义弹窗页脚。</p>
			</div>
		</Modal>
	}
}`}/>
			<Card 
				renderView={()=>{return<div className={styles['render-view']}>
					<button onClick={this.open.bind(this,'3')}>自定义宽高</button>
					<Modal 
						title='自定义宽高'
						visible={showModal=='3'} 
						onClose={this.close}
						onConfirm={this.close}
						onCancel={this.close}
						style={{width:'300px',height:'300px'}}
					>
						<div>
							<p>自定义宽300px ，高300px 。</p>
						</div>
					</Modal>
				</div>}}
				description={'自定义宽高'} 
				code={`import { Modal } from 'bnt'
class Demo extends React.Component {
	render() {
		return <Modal 
			title='自定义宽高'
			visible={showModal=='3'} 
			onClose={this.close}
			onConfirm={this.close}
			onCancel={this.close}
			style={{width:'300px',height:'300px'}}
		>
			<div>
				<p>自定义宽300px ，高300px 。</p>
			</div>
		</Modal>
	}
}`}/>
			<Card 
				renderView={()=>{return<div className={styles['render-view']}>
					<button onClick={this.open.bind(this,'4')}>自定义按钮文字</button>
					<Modal 
						title='自定义按钮文字'
						visible={showModal=='4'} 
						onClose={this.close}
						onConfirm={this.close}
						onCancel={this.close}
						confirmText='自定义确定按钮文字'
						cancelText='自定义取消按钮文字'
					>
						<div>
							<p>自定义确定和取消的文本。</p>
						</div>
					</Modal>
				</div>}} 
				description={'自定义按钮文字'} 
				code={`import { Modal } from 'bnt'
class Demo extends React.Component {
	render() {
		return <Modal 
			title='自定义按钮文字'
			visible={showModal=='4'} 
			onClose={this.close}
			onConfirm={this.close}
			onCancel={this.close}
			confirmText='自定义确定按钮文字'
			cancelText='自定义取消按钮文字'
		>
			<div>
				<p>可以根据需要，配置confirmText和cancelText的值。</p>
			</div>
		</Modal>
	}
}`}/>
			
		</Fragment>
	}
	renderParams = () => {
		return <div className={styles['params-wrap']}>
			<div className={styles['table-row']}>
				<div>参数</div>
				<div>说明</div>
				<div>类型</div>
				<div>默认值</div>
				<div>版本</div>
			</div>
			<div className={styles['table-row']}>
				<div>renderFooter</div>
				<div>自定义页脚</div>
				<div>function</div>
				<div>无</div>
				<div></div>
			</div>
			<div className={styles['table-row']}>
				<div>style</div>
				<div>自定义窗口宽高</div>
				<div>object</div>
				<div>width:500px,height:500px</div>
				<div></div>
			</div>
			<div className={styles['table-row']}>
				<div>confirmText</div>
				<div>确定按钮文字</div>
				<div>string</div>
				<div>确定</div>
				<div></div>
			</div>
			<div className={styles['table-row']}>
				<div>cancelText</div>
				<div>取消按钮文字</div>
				<div>string</div>
				<div>取消</div>
				<div></div>
			</div>
		</div>
	}
	render(){
		return <div className={styles['wrap']}>
			<Panel 
				name='Modal弹窗'
				description='需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 Modal 在当前页面正中打开一个浮层，承载相应的操作。
				另外当需要一个简洁的确认框询问用户时，可以使用 Modal.confirm() 等语法糖方法。'
				renderContent={this.renderModal}
				renderParams={this.renderParams}
			/>
		</div>
	}
}